<template>
  <div class="user-center-container">
    <!-- 侧边导航栏 -->
    <div class="sidebar">
      <div class="user-info">
        <div class="avatar">
          <img :src="userAvatar" :alt="userName" class="avatar-img">
        </div>
        <div class="user-detail">
          <h3 class="nickname">{{ userName }}</h3>
          <p class="user-id">ID: {{ userId }}</p>
        </div>
      </div>
      
      <el-menu 
        default-active="profile"
        class="user-menu"
        @select="handleMenuSelect"
        router
      >
        <el-menu-item index="profile">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        
        <el-menu-item index="address">
          <el-icon><Location /></el-icon>
          <span>收货地址</span>
        </el-menu-item>
        
        <el-menu-item index="orders">
          <el-icon><Document /></el-icon>
          <span>我的订单</span>
          <el-badge 
            v-if="unpaidCount > 0"
            :value="unpaidCount"
            class="item-badge"
          />
        </el-menu-item>
        
        <el-menu-item index="refunds">
          <el-icon><RefreshLeft /></el-icon>
          <span>退货退款</span>
          <el-badge 
            v-if="refundingCount > 0"
            :value="refundingCount"
            class="item-badge"
          />
        </el-menu-item>
        
        <el-menu-item index="favorites">
          <el-icon><Star /></el-icon>
          <span>我的收藏</span>
        </el-menu-item>
        
        <el-menu-item index="coupons">
          <el-icon><Ticket /></el-icon>
          <span>优惠券</span>
          <el-badge 
            v-if="availableCoupons > 0"
            :value="availableCoupons"
            class="item-badge"
          />
        </el-menu-item>
        
        <el-menu-item index="history">
          <el-icon><History /></el-icon>
          <span>浏览历史</span>
        </el-menu-item>
        
        <el-menu-item index="settings">
          <el-icon><Setting /></el-icon>
          <span>账号设置</span>
        </el-menu-item>
      </el-menu>
      
      <div class="logout-section">
        <el-button 
          type="danger" 
          plain
          @click="handleLogout"
          class="logout-btn"
        >
          <el-icon><Logout /></el-icon>
          退出登录
        </el-button>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../store/modules/user'
import { User, Location, Document, RefreshLeft, Star, Ticket, History, Setting, Logout } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 计算属性
const userId = computed(() => userStore.userId)
const userName = computed(() => userStore.userName)
const userAvatar = computed(() => userStore.userAvatar)
const isLogin = computed(() => userStore.isLoggedIn)

// 模拟数据 - 实际项目中应从API获取
const unpaidCount = ref(2) // 待付款订单数量
const refundingCount = ref(1) // 退款中订单数量
const availableCoupons = ref(5) // 可用优惠券数量

// 处理菜单选择
const handleMenuSelect = (index) => {
  router.push(`/user/${index}`)
}

// 处理退出登录
const handleLogout = () => {
  // 弹出确认对话框
  if (confirm('确定要退出登录吗？')) {
    // 清除用户信息
    userStore.logout()
    
    // 显示退出成功提示
    ElMessage.success('退出登录成功')
    
    // 跳转到登录页
    router.push('/login')
  }
}

// 检查登录状态
if (!isLogin.value) {
  router.push({
    path: '/login',
    query: { redirect: '/user' }
  })
}
</script>

<style scoped>
.user-center-container {
  display: flex;
  min-height: calc(100vh - 120px);
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 侧边导航栏 */
.sidebar {
  width: 240px;
  background-color: #fafafa;
  border-right: 1px solid $border-color;
  padding: 20px 0;
  box-sizing: border-box;
}

.user-info {
  text-align: center;
  padding: 20px;
  border-bottom: 1px solid $border-color;
  margin-bottom: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
  border: 2px solid $primary-color;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nickname {
  font-size: $font-size-lg;
  font-weight: 500;
  color: $text-color;
  margin-bottom: 5px;
}

.user-id {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  margin: 0;
}

.user-menu {
  border-right: none;
}

.user-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  padding: 0 40px;
  margin: 0;
}

.user-menu :deep(.el-menu-item.is-active) {
  color: $primary-color;
  background-color: #f0f7ff;
}

.item-badge {
  position: absolute;
  top: 10px;
  right: 30px;
}

.logout-section {
  padding: 20px;
  margin-top: 20px;
}

.logout-btn {
  width: 100%;
  height: 40px;
}

/* 主内容区域 */
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }
  
  .user-menu :deep(.el-menu-item) {
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
  .user-center-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid $border-color;
  }
  
  .user-menu {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .user-menu :deep(.el-menu-item) {
    min-width: 100px;
    padding: 0 15px;
  }
  
  .logout-section {
    padding: 10px 20px;
    margin-top: 0;
  }
  
  .logout-btn {
    display: none;
  }
}

@media (max-width: 480px) {
  .sidebar {
    padding: 10px 0;
  }
  
  .user-info {
    padding: 15px;
  }
  
  .avatar {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  
  .nickname {
    font-size: $font-size-base;
  }
  
  .user-id {
    font-size: $font-size-xs;
  }
  
  .user-menu :deep(.el-menu-item) {
    min-width: 80px;
    font-size: $font-size-sm;
  }
  
  .content {
    padding: 15px;
  }
}
</style>